<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 60%;
            margin: 20px auto;
            text-align: center;
        }

        table {
            width: 100%;
            margin-top: 30px;
            border-collapse: collapse;
        }

        table caption {
            text-align: left;
            margin-bottom: 10px;
        }

        table tr td,
        table tr th {
            border: 1px solid blue;
            padding: 10px 0px;
            text-align: center;
        }

        .small {
            width: 60px;
        }
    </style>


</head>

<body>
    <div>
        <label>编号：<input type="text" id="txt1"></label>
        <label>姓名：<input type="text" id="txt2"></label>
        <label>住址：<input type="text" id="txt3"></label>
        <button id="btn_add">添加</button>
        <button id="btn_update">更新</button>

        <table id="tbl">
            <caption>
                <input type="checkbox" id="all"><button onclick="moresel()">选择所有</button>
                <button id="btn_del" style="margin-left: 30px;" onclick="moredel()">删除选中项</button>
                <input type="text" id="search" placeholder="输入编号筛选查询" style="margin-left: 30px;" onkeyup="myFunction()"> 
            </caption>
            <table id="tbody">
                <tr>
                    <th>选择</th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>住址</th>
                    <th colspan="2">操作</th>
                </tr>

                <tr>
                    <td><input type="checkbox" name="xh"></td>
                    <td>1</td>
                    <td>小明</td>
                    <td>武汉</td>
                    <td><button onclick="del(this)">删除</button></td>
                    <td><button onclick="createTdLink(this)">编辑</button></td>
                </tr>

                <tr>
                    <td><input type="checkbox" name="xh"></td>
                    <td>2</td>
                    <td>小丽</td>
                    <td>宜昌</td>
                    <td><button onclick="del(this)">删除</button></td>
                    <td><button onclick="createTdLink(this)">编辑</button></td>
                </tr>

                <tr>
                    <td><input type="checkbox" name="xh"></td>
                    <td>3</td>
                    <td>小王</td>
                    <td>长沙</td>
                    <td><button onclick="del(this)">删除</button></td>
                    <td><button onclick="createTdLink(this)">编辑</button></td>
                </tr>

                <tr>
                    <td><input type="checkbox" name="xh"></td>
                    <td>4</td>
                    <td>小李</td>
                    <td>湘潭</td>
                    <td><button onclick="del(this)">删除</button></td>
                    <td><button onclick="createTdLink(this)">编辑</button></td>
                </tr>

            </table>
        </table>
    </div>

    <script>
        let id = document.getElementById('txt1'); //编号
        let name = document.getElementById('txt2'); //姓名
        let address = document.getElementById('txt3'); //地址

        let btn_add = document.getElementById('btn_add'); //添加按钮
        let btn_update = document.getElementById('btn_update'); //添加按钮
        let ckall = document.getElementById('all'); //添加按钮

        let table = document.getElementById('tbl'); //表格对象
        let tbody = document.getElementById('tbody'); //tbody对象
        let sel = document.getElementsByName("xh"); //选择

        let row_index; //当前行序号

        btn_add.onclick = function () {
            let tr = createTr();
            tbody.append(tr);
        }

        function createTr() {
            let tr = document.createElement('tr');
            let td0 = createTd('<input type="checkbox">');
            let td1 = createTd(id.value);
            let td2 = createTd(name.value);
            let td3 = createTd(address.value);
            let td4 = createTdLink('编辑', '#');
            let td5 = createTdLink('删除', '#');
            tr.append(td0);
            tr.append(td1);
            tr.append(td2);
            tr.append(td3);
            tr.append(td4);
            tr.append(td5);
            return tr;
        }


        function createTd(txt) {
            let td = document.createElement('td');
            td.innerHTML = txt;
            return td;
        }

        // 更改
        function createTdLink(txt, href) {
            let td = document.createElement('td');
            let link = document.createElement('a');
            link.innerHTML = txt;
            link.href = href;
            td.append(link);

            if (txt == '删除') {
                link.onclick = function () {
                    del(this);
                }
            }

            if (txt == '编辑') {
                link.onclick = function () {
                    modi(this);
                }
            }

            return td;
        }

        // 单个删除
        function del(obj) {
            let tr = obj.parentElement.parentElement;
            // tbody.removeChild(tr);
            tr.parentElement.removeChild(tr);
        }
    

        // 多选
        function moresel() {
            for (let i = 0; i < sel.length; i++) {
                sel[i].checked = true;
            }
        }

        // 删除选中项
        function moredel() {
            for (let i = 0; i < sel.length; i++) {
                if (sel[i].checked) {
                    del(sel[i]);
                }
            }
        }


        //筛选查询
        function myFunction() {
            let input = document.getElementById('search');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('tbody');
            let tr = table.getElementsByTagName("tr");
            // 循环表格每一行，查找匹配项
            for (let i = 0; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName("td")[1]; //获得第一列
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }

    </script>


</body>

</html>